<template>
  <div>
    <div class="title">
      <span class="titleContent">{{title}}</span
      ><span class="statisticalTime">统计时间：2024-03</span>
    </div>
    <div
      class="active-users card"
      style="width: 100%; height: 200px"
      ref="container"
    ></div>
  </div>
</template>
<script setup>
import { onBeforeUnmount, onMounted, ref, onActivated, onDeactivated } from "vue"
import * as echarts from "echarts"

let chart = null
function resize() {
  chart.resize()
}
const container = ref(null)
const props = defineProps(["title"])
const initChart = () => {
  if (chart == null) {
    chart = echarts.init(container.value)
  }
  chart.setOption({
    grid: {
      top: "35px",
      left: "35px",
      right: "35px",
      bottom: "25px",
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "none",
      },
      formatter: function (params) {
        var result = ""
        var dotaDta =
          '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#409EFF"></span>'
        var dotaDta2 =
          '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:rgba(250, 104, 7)"></span>'
        result +=
          params[0].axisValue +
          "</br>" +
          dotaDta +
          "高倍病例数量:" +
          params[0].data +
          "</br>" +
          dotaDta2 +
          "占医疗总费用比例:" +
          params[1].data +
          "%"
        return result
      },
    },legend: {
      data: ["病例数", "占比"],
      x: "right",
    },
    xAxis: {
      type: "category",
      data: ["202401", "202402", "202403", "202404"],
    },
    yAxis: [
      {
        type: "value",
        name: "病例数",
        splitLine: {
          lineStyle: {
            type: "solid",
            color: "rgba(135,140,147,0.8)",
          },
        },
      },
      {
        type: "value",
        name: "占比",
        position: "right",
        alignTicks: true,
        axisLabel: {
          // 使用 formatter 函数格式化标签
          formatter: "{value} %",
        },
        axisLine: {
          show: true,
          lineStyle: { type: "solid", color: "rgba(135,140,147,0.8)" },
        },
      },
    ],
    series: [
      {
        name: "病例数",
        data: [60, 40, 30, 10],
        type: "bar",
        barWidth: "5%",
        itemStyle: {
          emphasis: { barBorderRadius: 10 },
          normal: {
            barBorderRadius: 10,
            color: "#409EFF",
          },
        },
      },

      {
        name: "占比",
        yAxisIndex: 1,
        data: [5, 6, 4, 2],
        type: "line",
      
        color: "rgba(250, 104, 7)",
      },
    ],
  })
  window.addEventListener("resize", resize)
}

onMounted(() => {
  initChart()
})
</script>
<style scoped>
.title {
  position: relative;
  padding-left: 10px;
  margin-bottom: 20px;
}
.title::before {
  background: #108ee9;
  height: 100%;
  width: 5px;
  content: "";
  position: absolute;
  left: 0;
}
.titleContent {
  font-size: 18px;
  font-weight: 900;
}
.statisticalTime {
  font-size: 14px;
  color: rgb(93, 92, 102);
  /* color: rgb(250, 104, 7); */
  margin-left: 10px;
}
</style>
